<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加部门</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui_v2/css/layui.css" media="all"/>
</head>
<body>
<div style="width: 300px;height: 200px;padding: 15px">
    <form id="add_dept_form" class="layui-form"
          action="${pageContext.request.contextPath}/deptAction_addOrUpdate.action"
          method="post" lay-filter="add_form_filter">

        <input type="hidden" id="id_input" name="id" value="${dept.id}"/>

        <div class="layui-form-item">
            <label class="layui-form-label">部门名称：</label>
            <div class="layui-input-block">
                <input id="dept_name_input" type="text" name="name" required value="${dept.name}" placeholder="请输入部门名称"
                       class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">部门备注：</label>
            <div class="layui-input-block">
                    <textarea id="dept_reamrk" name="remark" required placeholder="请输入内容"
                              class="layui-textarea">${dept.remark}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn">提交</button>
            </div>
        </div>
    </form>
</div>

<script src="${pageContext.request.contextPath}/layui/layui_v2/layui.js"></script>
<script>

    layui.use(['jquery', 'layer', 'form'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                form = layui.form;

            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引


            //表单提交事件
            form.on('submit(add_form_filter)', function (data) {
//            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
//            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
//            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                var input_name = $("#dept_name_input").val();

                var name = "${dept.name}";

                //如果name 不为空 是修改
                if (name != null) {
                    //如果相等没有发生修改直接提交
                    if (input_name == name) {
                        submit_form();

                    } else {
                        //不相等, 正常检查部门是否存在
                        dept_check(input_name);
                    }

                } else {
                    dept_check(input_name);
                }

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            //dept检查
            function dept_check(value) {
                $.post(
                    "${pageContext.request.contextPath}/deptAction_checkDept.action",
                    {name: value},
                    function (result) {
                        if (result == 'exists') {
                            // layer.tips 吸附弹出
                            layer.tips('该部门已经存在', "#dept_name_input");
                            $("#dept_name_input").focus();
                        } else {
                            submit_form();
                        }
                    });
            }

            function submit_form() {

                $.post("${pageContext.request.contextPath}/deptAction_addOrUpdate.action",
                    $("#add_dept_form").serialize(),
                    function (data) {
//                        parent.layer.alert(data);
                        parent.location.href = '${pageContext.request.contextPath}/pages_dept_dept.action';
                        parent.layer.close(index);

                    });
            }
        }
    );


</script>
</body>
</html>
